PouchDB এবং React.js Integration গাইড ও নোট

PouchDB একটি ক্লায়েন্ট-সাইড ডেটাবেস, যা মূলত ব্রাউজারে ডেটা সংরক্ষণ এবং সিঙ্ক্রোনাইজেশন করতে ব্যবহৃত হয়। React.js একটি জনপ্রিয় JavaScript লাইব্রেরি যা ইউজার ইন্টারফেস (UI) তৈরি করার জন্য ব্যবহৃত হয়। PouchDB এবং React.js একসাথে ব্যবহার করলে আপনি একটি সিঙ্ক্রোনাইজড, অফলাইন ফার্স্ট, এবং পারফরম্যান্ট অ্যাপ্লিকেশন তৈরি করতে পারবেন। এই টিউটোরিয়ালে আমরা PouchDB কে React.js এর সাথে ইন্টিগ্রেট করব।

১. প্রাথমিক সেটআপ

প্রথমে, আপনার React অ্যাপ্লিকেশন তৈরি করুন এবং PouchDB ইন্সটল করুন:

npx create-react-app pouchdb-react
cd pouchdb-react
npm install pouchdb-browser

pouchdb-browser প্যাকেজটি ব্রাউজারের জন্য PouchDB এর সংস্করণ।

২. PouchDB সেটআপ করা

আপনি PouchDB কে React কম্পোনেন্টে ব্যবহার করতে পারেন। এখানে একটি সাধারণ উদাহরণ দেওয়া হল যেখানে PouchDB এর ডেটাবেস তৈরি করা হয়েছে এবং ডেটা ইনসার্ট ও ফেচ করা হয়েছে:

// src/PouchDBExample.js
import React, { useEffect, useState } from 'react';
import PouchDB from 'pouchdb-browser';

const PouchDBExample = () => {
  const [todos, setTodos] = useState([]);
  const db = new PouchDB('todos');

  // ডেটাবেস থেকে সব টাস্ক ফেচ করা
  const fetchTodos = async () => {
    try {
      const allDocs = await db.allDocs({ include_docs: true });
      setTodos(allDocs.rows.map(row => row.doc));
    } catch (err) {
      console.error('Error fetching data from PouchDB', err);
    }
  };

  // টাস্ক ইনসার্ট করা
  const addTodo = async (text) => {
    try {
      const todo = { _id: new Date().toISOString(), text, done: false };
      await db.put(todo);
      fetchTodos(); // ডেটা রিফ্রেশ
    } catch (err) {
      console.error('Error adding todo to PouchDB', err);
    }
  };

  // কম্পোনেন্ট লোড হলে প্রথমে ডেটা ফেচ করা
  useEffect(() => {
    fetchTodos();
  }, []);

  return (
    <div>
      <h2>My Todo List</h2>
      <input
        type="text"
        onKeyDown={(e) => e.key === 'Enter' && addTodo(e.target.value)}
        placeholder="Add a new task"
      />
      <ul>
        {todos.map(todo => (
          <li key={todo._id}>
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PouchDBExample;

এখানে PouchDBExample.js ফাইলে আমরা:

1. PouchDB ডেটাবেস তৈরি করেছি এবং সেটি ব্যবহার করে টাস্ক যুক্ত ও দেখানোর কাজ করেছি।
2. addTodo ফাংশন দিয়ে নতুন টাস্ক ইনসার্ট করা হয়েছে এবং fetchTodos ফাংশন দিয়ে সব টাস্ক ফেচ করা হয়েছে।

৩. ডেটাবেস সিঙ্ক্রোনাইজেশন

PouchDB এর সবচেয়ে বড় সুবিধা হলো এটি সিঙ্ক্রোনাইজেশন সমর্থন করে, মানে আপনি যখন অফলাইন থাকবেন তখনও ডেটা এডিট বা ইনসার্ট করতে পারবেন এবং পুনরায় অনলাইনে আসলে সেটা অটোমেটিক্যালি সিঙ্ক হবে। এখানে আমরা কিভাবে PouchDB সিঙ্ক্রোনাইজেশন সেট করতে পারি তা দেখব:

import React, { useEffect, useState } from 'react';
import PouchDB from 'pouchdb-browser';

const PouchDBSyncExample = () => {
  const [todos, setTodos] = useState([]);
  const db = new PouchDB('todos');
  const remoteDb = new PouchDB('http://localhost:5984/todos'); // CouchDB রিমোট সার্ভার

  // ডেটাবেস সিঙ্ক্রোনাইজেশন
  const syncDatabases = () => {
    db.sync(remoteDb, { live: true, retry: true })
      .on('change', (info) => {
        console.log('Data synced!', info);
      })
      .on('error', (err) => {
        console.error('Sync Error:', err);
      });
  };

  // ডেটাবেস থেকে টাস্ক ফেচ করা
  const fetchTodos = async () => {
    try {
      const allDocs = await db.allDocs({ include_docs: true });
      setTodos(allDocs.rows.map(row => row.doc));
    } catch (err) {
      console.error('Error fetching data from PouchDB', err);
    }
  };

  useEffect(() => {
    syncDatabases(); // সিঙ্ক্রোনাইজেশন শুরু করা
    fetchTodos(); // ডেটা ফেচ করা
  }, []);

  return (
    <div>
      <h2>My Todo List with Sync</h2>
      <ul>
        {todos.map(todo => (
          <li key={todo._id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
};

export default PouchDBSyncExample;

এখানে:

1. আমরা sync() ফাংশন ব্যবহার করে PouchDB এর স্থানীয় ডেটাবেস এবং CouchDB (বা অন্য রিমোট সার্ভার) সিঙ্ক করেছি।
2. { live: true, retry: true } অপশনগুলি ব্যবহার করা হয়েছে যাতে সিঙ্ক্রোনাইজেশন লাইভ থাকে এবং কোনো সমস্যা হলে পুনরায় চেষ্টা করা হয়।

৪. PouchDB এর সাথে React-এর স্টেট ব্যবস্থাপনা

React কম্পোনেন্টে যখন ডেটা পরিবর্তন হয়, তখন React এর স্টেট আপডেট হয় এবং UI রেন্ডার হয়। PouchDB-এর ডেটার সাথে স্টেট ম্যানেজমেন্ট খুবই গুরুত্বপূর্ণ, যাতে ডেটার পরিবর্তন UI তে রিয়েল-টাইমে প্রতিফলিত হয়। আমরা এই কাজটি করতে useEffect এবং useState হুক ব্যবহার করেছি।

সারাংশ

PouchDB এবং React.js এর ইন্টিগ্রেশন অনেক শক্তিশালী অ্যাপ্লিকেশন তৈরির জন্য উপযোগী। PouchDB এর অফলাইন সাপোর্ট এবং সিঙ্ক্রোনাইজেশন ক্ষমতা React-এর সাথে মিলে একটি পারফরম্যান্ট, রেসপন্সিভ এবং ব্যবহারকারী-বান্ধব অ্যাপ্লিকেশন তৈরি করতে সহায়ক। এই টিউটোরিয়ালে আমরা দেখলাম কিভাবে React কম্পোনেন্টে PouchDB ব্যবহার করে ডেটা ইনসার্ট এবং ফেচ করা যায় এবং কিভাবে ডেটাবেস সিঙ্ক্রোনাইজেশন সেট আপ করা যায়।

আপনি যদি এটি একটি প্রোডাকশন অ্যাপ্লিকেশন হিসেবে ব্যবহার করতে চান, তবে আপনাকে কিছু অতিরিক্ত বিষয় যেমন নিরাপত্তা, ডেটা ভ্যালিডেশন এবং কাস্টম লজিক সম্পর্কে ভাবতে হবে।